<#import "/spring.ftl" as spring />

<head>
	<title>Merry Chirstmas Card</title>
	<link href="${rc.contextPath}/styles/upload.css" rel="stylesheet" type="text/css">
	<link href="${rc.contextPath}/styles/default.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="${rc.contextPath}/dwr/interface/UploadMonitor.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/dwr/engine.js"></script>    
	<script type="text/javascript" src="${rc.contextPath}/dwr/util.js"></script> 
	
	<script type="text/javascript" language="javascirpt">
		var firstFocus = true;
		var loginBeforeSubmit = false;
		
		jQuery(document).ready(function(){			
			jQuery("#finish_step1").unbind("click").click(function(){
				if(jQuery.trim(jQuery("#card_content").val()) == ""){
					iAlert("Bạn hãy nhập lời chúc trước khi qua bước tiếp theo.");
					return;
				}
				jQuery(".step1").fadeOut();
				jQuery(".step2").fadeIn();
			});
			
			jQuery("#finish_step2").unbind("click").click(function(){
				submitCard();							
			});
			
			jQuery("#create_new_card").unbind("click").click(function(){
				
			});
			
			jQuery("textarea.limitedInput").keydown(function(e){
        		if(e.keycode == 8 || e.which == 8 ||
        		(e.keycode >= 35 && e.keycode <= 40) ||
        		(e.which >= 35 && e.which <= 40) ||
        		(e.keycode == 17 || e.keycode == 18) ||
        		(e.which == 18 || e.which == 17) || 
        		(e.which == 46 || e.which == 46)) return true;        		
        		var maxlength = jQuery(this).attr("rel");
        		return jQuery(this).val().length <= parseInt(maxlength);
        	}).change(function(){
        		var maxlength = jQuery(this).attr("rel");
        		maxlength = parseInt(maxlength);
        		var val = jQuery(this).val();
        		if(val.length>maxlength){
        			jQuery(this).val(val.substring(0,maxlength));
        		}
        	});
        	
        	jQuery("#card_content").focus(function(){
        		if(firstFocus == true){
        			this.value = "";
        			firstFocus = false;
        		}
        	}).blur(function(){
        		jQuery(".wish").val(jQuery(this).val());
        	});
        	
        	jQuery(".ulImg a").fancybox({
				'transitionIn'	:	'elastic',
				'transitionOut'	:	'elastic',
				'speedIn'		:	400, 
				'speedOut'		:	200, 
				'overlayShow'	:	true
			});
		        	
		    jQuery(".useYtLink a").fancybox({
				'transitionIn'	:	'elastic',
				'transitionOut'	:	'elastic',
				'speedIn'		:	400, 
				'speedOut'		:	200, 
				'overlayShow'	:	true
			});
			
			jQuery("#use_youtube").fancybox({
				'transitionIn'	:	'elastic',
				'transitionOut'	:	'elastic',
				'speedIn'		:	400, 
				'speedOut'		:	200, 
				'overlayShow'	:	true
			});
			
			jQuery("#avatarFile").change(function(){
				jQuery("#txtFileName").val(jQuery(this).val());
			});
			
			var loading = false;
	
			var uploadFormOptions = {
				url : ctx+'/fileupload/xmas',
				type : 'post',
				dataType : 'xml',		
				beforeSubmit : function(formData, jqForm, options){
					var form = jqForm[0];
					if (form.image.value) {
						jQuery("#txtFileName").iBlock({img: ctx+'/images/ajaxloading.gif'});
						return true;
					}
					
					iAlert("Bạn chưa chọn hình ảnh để upload");
					return false;
				},
				success : function(responseXML){
					var image = jQuery('image', responseXML).text();
										
					jQuery(".v_main").html("<center><img src='"+image+"' width='332' height='288' /><center>");
					jQuery(".imgUrl").attr("value", image);
					jQuery.fancybox.close();
					loading = false;
					jQuery("#txtFileName").iUnblock();
				}
			};
			
			jQuery("a#uploadAvatarSubmitButton").click(function(){
				if(loading == true){
					return false;
				}
				
				loading = true;
				jQuery("form#uploadAvatarForm").submit();		
				return false;
			});
					
			jQuery("form#uploadAvatarForm").ajaxForm(uploadFormOptions);
			
			jQuery("#youtube_popup_update").click(function(){
				///var youtubeCode = jQuery("#youtube_code").val();
				//jQuery(".v_main").html(youtubeCode);
				var youtubeUrl = jQuery("#youtube_url").val();
				var video_id = youtubeUrl.split('v=')[1];
				var ampersandPosition = video_id.indexOf('&');
				if(ampersandPosition != -1) {
				  video_id = video_id.substring(0, ampersandPosition);				  
				}
				
				jQuery(".v_main").jlEmbed({
					youtube: video_id,
					autoplay: true,
					width: '332',
					height: '288',
					params: 'wmode=transparent'
				});
				
				jQuery(".videoUrl").attr("value", youtubeUrl);
				jQuery.fancybox.close();			
			});
		});
		
		function submitCard(){
			UserManagerExt.isLogined(function(ret){
				if(ret == true){
					jQuery(".name1").attr("value",jQuery("#contact1").val());
					jQuery(".email1").attr("value",jQuery("#contact1_email").val());
					jQuery(".name2").attr("value",jQuery("#contact2").val());
					jQuery(".email2").attr("value",jQuery("#contact2_email").val());
					jQuery(".name3").attr("value",jQuery("#contact3").val());
					jQuery(".email3").attr("value",jQuery("#contact3_email").val());
					jQuery(".sendToMe").attr("value",jQuery("#sendToMe").attr("checked"));
					
					if(jQuery(".imgUrl").val() == '' && jQuery(".videoUrl").val() == ''){
						iAlert("Bạn chưa chọn hình hoặc youtube video cho thiệp này.");
						return;
					}else{
						jQuery("form[name=xmas]").submit();
					}
				}else{
					loginBeforeSubmit = true;
					jQuery(".btn_login").click();
				}
			});	
		}
		
		function refreshProgress(selector) {
			var formSelector = selector;
			UploadMonitor.getUploadInfo(function(uploadInfo){
				if (uploadInfo.inProgress) {
					jQuery("#avatarFile").hide();
					
					var fileIndex = uploadInfo.fileIndex;
					
					var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
					var width = parseInt(progressPercent * 3.5)+ 'px';
					
					if(!formSelector){
						jQuery("#progressBarText").html('Đang upload:' + progressPercent + '%');
						jQuery('#progressBarBoxContent').css('width', width);
						window.setTimeout('refreshProgress()', 1000);
					}else{
						var $form = jQuery(formSelector);
						var $progressBar = $form.siblings('#progressBar');
						$progressBar.find('#progressBarBoxContent').css('width', width);
						$progressBar.find('#progressBarText').html("Đang upload: "+progressPercent+"%");
						window.setTimeout("refreshProgress('"+formSelector+"')", 1000);
					}
					
				} else {
					jQuery('#avatarFile').show();
				}
		
				return true;
			});
		}
		
		function updateProgress(uploadInfo) {
			if (uploadInfo.inProgress) {
				jQuery("#avatarFile").hide();
		
				var fileIndex = uploadInfo.fileIndex;
		
				var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);
		
				jQuery("#progressBarText").html('Đang upload:' + progressPercent + '%');
				
				var width = parseInt(progressPercent * 3.5)+ 'px';
				jQuery('#progressBarBoxContent').css('width', width);
		
				window.setTimeout('refreshProgress()', 1000);
			} else {
				jQuery('#avatarFile').show();
			}
		
			return true;
		}
		
		function startProgress(selector) {
			if(!selector){
				jQuery('#progressBarBoxContent').css('width', '0px');
				jQuery('#progressBar').show();
				jQuery('#progressBarText').html("Đang upload: 0%");		
				window.setTimeout('refreshProgress()', 1500);
			}else{		
				var $form = jQuery(selector);
				var $progressBar = $form.siblings('#progressBar');
				$progressBar.find('#progressBarBoxContent').css('width', '0px');
				$progressBar.show();
				$progressBar.find('#progressBarText').html("Đang upload: 0%");
				// wait a little while to make sure the upload has started ..
				window.setTimeout("refreshProgress('"+selector+"')", 1500);
			}			
			
			return true;
		}
	</script>	
</head>
<body>
<!--buoc 1-->
<section>
    <div class="step1">
        <img src="${rc.contextPath}/images/xmas2010/tdyt.png" width="306" height="39" alt="Thông điệp yêu thương" class="as" />
        <label class="as ps nameSt1">Bước 1</label>
        <textarea class="as limitedInput" rel="160" id="card_content">hãy viết thông điệp bạn gửi cho bạn bè, người thân ...</textarea>
        <div id="finish_step1" class="as btn_next">TIẾP TỤC<span id="char_count"></span></div>
    </div>
</section>
<!--buoc 1-->
<!--buoc 2-->
<section>
    <div class="step2" style="display: none;">
         <img src="${rc.contextPath}/images/xmas2010/gtbbnt.png" width="390" height="46" alt="Gửi tới bạn bè người thân" class="as" />
         <label class="as ps nameSt2">Bước 2</label>
         <!--form-->
         <section>
             <div class="as send">
                <div class="al">
                    <label>Họ tên:</label>
                    <input type="text" id="contact1" tabIndex="1"/>
                    <input type="text" id="contact2" tabIndex="3"/>
                    <input type="text" id="contact3" tabIndex="5"/>
                </div>
                <div class="ar">
                    <label>Địa chỉ Email</label>
                    <input type="text" id="contact1_email" tabIndex="2"/>
                    <input type="text" id="contact2_email" tabIndex="4"/>
                    <input type="text" id="contact3_email" tabIndex="6"/>
                </div>
                <div style="width: 100%;">
                	<label><input id="sendToMe" type="checkbox" checked="checked"/>Gửi cho chính bạn</label>
                </div>
             </div>  
             <div id="finish_step2" class="as btn_next">TIẾP TỤC</div>
		</section>
        <!--form-->                  
    </div>
</section>    
<!--buoc 2-->
<!--hoan thanh va xem lai-->
<section>
    <div class="as video"> 
        <section>
            <div class="v_main">
                <!--khong co video-->
                <div class="as text">SỬ DỤNG HÌNH ẢNH CỦA BẠN<br />HOẶC<br />VIDEO TỪ YOUTUBE<br /><a href="#youtube_popup" class="ps" id="use_youtube">YouTube</a></div>
                <!--khong co video-->
                
                <!--co video-->
                    <!--Embed vo day-->                
                <!--co video-->                
                <img id="card_img" src="" style="display:none;">
            </div>           
        </section>
        <!--chua login-->
        <section>            
            <div class="lrtext" style="display: none;">Bạn phải <b><a class="btn_register" href="register.htm">Đăng Ký</a></b> và <b><a class="btn_login" href="login.htm">Đăng Nhập</a></b> để có thể  thực hiện mục tiêu này!</div>
        </section>
        <!--chua login-->
        <!--da login-->
        <section>
            <span class="ulImg"><a style="text-decoration: none; color: white;" href="#image_popup">UPLOAD HÌNH ẢNH</a></span>
            <span class="useYtLink"><a style="text-decoration: none; color: white;" href="#youtube_popup">SỬ DỤNG VIDEO TỪ YOUTUBE</a></span>
        </section>
        <!--da login-->
        <a href="http://www.youtube.com/user/igoalvn?feature=mhsn#p/p" target="_blank" class="as ytLink">Clip hay trên Youtube về Giáng Sinh</a>
    </div>
</section>
<div style="display:none;">
	<div id="youtube_popup" style="font-family:arial;height:150px;padding:10px;font-size:12px;">
		<b style="font-size:13px;">Bạn có thể copy đường link đến youtube video vào ô dưới đây</b><br/><br/>
		<input type="text" id="youtube_url" size="55" style="width:100%;height:22px;padding-top:3px;"/><br/><br/>
		<p style="font-size:11px;padding:10px 0px;">Ví dụ: <b>http://www.youtube.com/watch?v=B0f7vS93o60</b></p>
		<!--
		Hoặc copy youtube embed code vào đây<br/>
		<textarea cols="50" rows="5" id="youtube_code"></textarea><br/>
		-->
		<input type="button" id="youtube_popup_update" value="Cập nhật"/>
	</div>
</div>
<div style="display:none;">
	<div id="image_popup" class="uploadAvatarPopup" style="padding:15px;font-family:arial;">
  		<h1 style="margin-left:0px">Chọn hình cho thiệp</h1>
    	<div class="clearthis"></div>
    	<div class="uploaderBox">
    		<p>Bạn có thể tải tập tin <b>JPG</b>, <b>GIF</b> hoặc <b>PNG</b>, tối đa là <b>4MB</b>, kích cỡ tối thiểu <b>180x180px</b></p>
        	<form id="uploadAvatarForm" enctype="multipart/form-data" onsubmit="startProgress('#uploadAvatarForm');" style="float:left;clear:both">
	            <div class="input-file">
                    <label><span>Chọn file...</span>
                    <input type="hidden" value="4194304" name="MAX_FILE_SIZE">  
                    <input type="file" id="avatarFile" name="image">                    
                    </label>
                    <var>
                    <input type="text" readonly="readonly" value="" id="txtFileName" name="txtFileName">
                    </var> 
    	        </div>
    	        
    	        <p class="termUploader">iGoal không chịu trách nhiệm với bất cứ vi phạm về bản quyền và nội dung về hình ảnh do thành viên đăng tải.Xin vui lòng đọc kỹ <a href="/viewPage.html?page=term">Điều Khoản Sử Dụng</a></p>
        		<a href="#" id="uploadAvatarSubmitButton" style="border:1px solid #999;background-color:#cecece;font-size:12px;font-weight:bold;color:#333;padding:4px;">Đăng ảnh</a>
	        </form>
			<style>
			.clearthis{clear:both}
			</style>
			
	        <div class="clearthis"></div>
	        <div id="progressBar" style="display: none;margin-top:5px">
	            <div id="theMeter">
	                <div id="progressBarText"></div>
	                <div id="progressBarBox">
	                    <div id="progressBarBoxContent"></div>
	                </div>
	            </div>
	        </div>           		
    	</div>        	     	
  	</div> 
</div>

<form action="${rc.contextPath}/xmas.html" method="POST" name="xmas">
	<@spring.formHiddenInput path="xmas.card.wish" attributes='class="wish"'/>
	<@spring.formHiddenInput path="xmas.card.imgUrl" attributes='class="imgUrl"'/>
	<@spring.formHiddenInput path="xmas.card.videoUrl" attributes='class="videoUrl"'/>
	<@spring.formHiddenInput path="xmas.reception1.name" attributes='class="name1"'/>
	<@spring.formHiddenInput path="xmas.reception1.email" attributes='class="email1"'/>
	<@spring.formHiddenInput path="xmas.reception2.name" attributes='class="name2"'/>
	<@spring.formHiddenInput path="xmas.reception2.email" attributes='class="email2"'/>
	<@spring.formHiddenInput path="xmas.reception3.name" attributes='class="name3"'/>
	<@spring.formHiddenInput path="xmas.reception3.email" attributes='class="email3"'/>
	<@spring.formHiddenInput path="xmas.reception4.name"/>
	<@spring.formHiddenInput path="xmas.reception4.email"/>
	<@spring.formHiddenInput path="xmas.reception5.name"/>
	<@spring.formHiddenInput path="xmas.reception5.email"/>
	<@spring.formHiddenInput path="xmas.sendToMe" attributes='class="sendToMe"'/>
</form>
</body>